<template>
	<view class="irrational-setting">
		<view class="status_bar"></view>
		<view class="uni-flex uni-row header">
			<view class="back-circle" @click="backTo">
				<
			</view>
			<view class="title">
				<view class="text">+ 轮灌 +</view>
			</view>
		</view>
		<view class="work">
			<view class="uni-flex uni-column control">
				<view class="text">控制灌区</view>
				<view class="area">
					<view class="name" v-for="irri in getirris" :key="irri.id">{{irri.name}}</view>
				</view>
			</view>
			<view class="uni-flex uni-column irri">
				<view class="text">轮灌频率</view>
				<view class="area">
					<view class="uni-flex uni-row param">
						<input class="input" type="number" v-model="circles" />
						<text class="unit">*24小时分区轮灌</text>
					</view>
				</view>
			</view>
			<button class="button" type="default" @click="confirm">应用</button>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				irrations:[
					{
						id: 1,
						name: "八号工坊灌区",
					},
					{
						id: 2,
						name: "西海岸灌区"
					}
				],
				circles: 1
			}
		},
		onLoad() {

		},
		computed:{
			...mapState('device', ['devices']),
			...mapState('irrigation', ['irrigations', 'groups']),
			getirris(){
				let irs = this.irrigations.filter(irri => irri.groups.length > 1)
				return irs
			}
		},
		
		methods: {
			backTo()
			{
				uni.navigateBack({
					
				})
			},
			confirm()
			{
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.irrational-setting
{
	.header{
		width: 750rpx;
		height: 51.58rpx;
		.back-circle{
			width: 52.75rpx;
			height: 52.75rpx;
			margin-left: 33.99rpx;
			background-color: #1D786C;
			border-radius: 50%;
			
			text-align: center;
			color: #FFFFFF;
			font-size: 37.51rpx;
			font-weight: bold;
		}
		.title{
			flex: 1;
			// width: 90%;
			.text{
				width: 280.18rpx;
				border: 1.17rpx solid #299384;
				border-left-width: 0;
				border-right-width: 0;
				border-radius: 11.72rpx;
				margin: 0 auto;
				
				text-align: center;
				font-size: 33.99rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #299384;
				line-height: 51.58rpx;
			}
		}
	}
	.work{
		margin-top: 21.1rpx;
		padding: 35.16rpx;
		width: 680rpx;
		height: 814.77rpx;
		background: #F0FBF9;
		border-radius: 11.72rpx;
		justify-content: center;
		align-items: center;
		.control, .irri{
			width: 647.12rpx;
			border: 1px solid #0D3B34;
			border-radius: 11.72rpx;
			align-items: center;
			margin-bottom: 25.79rpx;
			.text{
				padding: 9.37rpx 0 16.41rpx 0;
				width: 177.02rpx;
				height: 39.85rpx;
				font-size: 43.37rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #1D786C;
			}
		}
		.control{
			.area{
				margin: 16.41rpx 0;
				.name{
					margin-bottom: 51.58rpx;
					width: 597.88rpx;
					height: 67.99rpx;
					background: #1D786C;
					border-radius: 11.72rpx;
					
					text-align: center;
					font-size: 35.16rpx;
					font-weight: 400;
					color: #FFFFFF;
					letter-spacing: 0.5em;
					line-height: 67.99rpx;
				}
			}
		}
		.irri{
			height: 317.7rpx;
			.area{
				.param{
					margin-top: 69.16rpx;
					align-items: center;
					.input{
						width: 144.19rpx;
						height: 67.99rpx;
						background: #1D786C;
						margin-right: 7.03rpx;
						border-radius: 11.72rpx;
						
						font-size: 36.34rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 67.99rpx;
						text-align: center;
						vertical-align: middle;
					}
					.unit{
						font-size: 30.48rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #1D786C;
					}
				}
			}
		}
		.button{
			width: 298.94rpx;
			height: 67.99rpx;
			background: #1D786C;
			border-radius: 11.72rpx;
			
			font-size: 35.16rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 67.99rpx;
		}
	}
}
</style>
